﻿@using CP_SchoolForChildren_v0._1.Controllers.Support
@using CP_SchoolForChildren_v0._1.Models.DataModel
@{
    ViewBag.Title = "Tìm trường cho bé";
    Layout = "~/Views/Shared/FE/_Layout_FE_Index.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        $('#search-form').submit(function (e) {
            if (!$('#schoolName').val() || $('#schoolName').val().trim() == null || $('#schoolName').val().trim() == "") {
                e.preventDefault();
            }
        });
        $('#search-suggestion').submit(function () {
            if (!$('#userEducation').val() || $('#userEducation').val().trim() == null || $('#userEducation').val().trim() == "") {
                $('.error').html('Vui lòng nhập học phí mong muốn');
                $('.error').show();
                return false;
            }
            if (/^(([1-9]+([.][0-9]+)?)|(0[.][0-9]*[1-9]))$/.test($('#userEducation').val())) {
                return true;
            }else {
                $('.error').html('Vui lòng nhập số thập phân lớn hơn 0');
                $('.error').show();
                return false;
            }
                
        });
    });
</script>

<style type="text/css">
    .seartitle {
        border-bottom: 2px dashed #C5E0DC; 
        float: left; 
        padding: 10px; 
        text-indent: 10px; 
        *box-shadow: 1px 1px 2px #E6E6E6; 
        width: 650px;
    }
    .seartitle h3 {
        *text-transform: uppercase;
        line-height: 28px;
        color: #774F38;
        float: left;
        *width: 60%;
        font-size: 20px;
        text-shadow: 0.5px 0.5px 1px rgba(154, 94, 61, 0.2);
    }
    #search-suggestion label.sslabel
    {
        line-height: 30px;
        margin-left: 5px;
        padding: 5px;
        vertical-align: middle;
                    
    }
    #search-suggestion #suggest-search
    {
        margin-left: 80px;
        margin-top: 15px;
    }
    label.sslabel .userQuality
    {
        vertical-align: middle;
        padding: 5px;
        margin: 5px;
        cursor: pointer;
    }
    #CityID, #DistrictID, #SchoolTypeID, #Fee {
        background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.9);
        border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
        border-image: none;
        border-radius: 2.5px 0 0 2.5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 0 rgba(8, 22, 37, 0.02) inset, 0 0 2px rgba(8, 22, 37, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
        padding: 5px 8px;
        width: 260px;
        margin: 15px;
        margin-bottom: 0px;
    }
    #ListService {
        line-height: 28px;
        padding: 5px 8px;
        width: 260px;
        height: 115px;
        overflow: auto;
        margin: 15px;
        border: 1px solid;
        border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
    }
    .error {
        word-wrap: break-word;
        font-size: 10px;
        float: left;
        padding: 10px;
        padding-top: 0px;
        color: red;
    }
    #btnSearch
    {
        background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.9);
        border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
        border-image: none;
        border-radius: 2.5px 0 0 2.5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 0 rgba(8, 22, 37, 0.02) inset, 0 0 2px rgba(8, 22, 37, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
        padding: 6px 8px;
        cursor:pointer;
        margin-left:10px;
    }
    #map_canvas
    {
        width:600px;
        height:210px;
        margin:10px;
    }          
    .shadow {
        -moz-box-shadow:    1px 1px 3px 1px #424345;
        -webkit-box-shadow: 1px 1px 3px 1px #424345;
        box-shadow:         1px 1px 3px 1px #424345;
    }
    .row{padding:10px;}
</style>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCeFkS9kOQDDQHkqnokJTvQKUwJo14huzE&sensor=false" type="text/javascript"></script>
<link href="@Url.Content("~/Content/FE/Addition.css")" rel="stylesheet" type="text/css" />
<div class="allhome">
    <!--left panel start -->
    <div id="left">
        <div class="view view-first">
            <img src="@Url.Content("~/Content/FE/images/BG_Condition.jpg")" />
            <div class="mask">
                <h2 onclick="ChangeTab(1)">
                    Lựa chọn theo 
                    <div class="rw-words rw-words-1" style="margin-left: 10px;">
                        <span>Học phí</span>
                        <span>Dịch vụ</span>
                        <span>Loại trường</span>
                    </div>
                </h2>
            </div>
        </div>  
        <div class="view view-first">
            <img src="@Url.Content("~/Content/FE/images/BG_Map.jpg")" />
            <div class="mask">
                <h2 onclick="ChangeTab(2); initialize();">
                    Tìm trường theo
                    <div class="rw-words rw-words-1" style="margin-left: 10px;">
                        <span>Quãng đường</span>
                        <span>Bản đồ</span>
                    </div>
                </h2>
            </div>
        </div>  
        <div class="view view-first">
            <img src="@Url.Content("~/Content/FE/images/BG_Fuzzy.jpg")" />
            <div class="mask">
                <h2 onclick="ChangeTab(3)">
                    Gợi ý theo 
                    <div class="rw-words rw-words-1" style="margin-left: 10px;">
                        <span>Đầu tư</span>
                        <span>Chất lượng</span>
                    </div>
                </h2>
            </div>
        </div>
    </div>
    <!--left panel end -->
    <div class="seartitle">
        <h3>+ Chọn theo TIÊU CHÍ +</h3>
        <div style="float: right;">
            <form method="GET" id="search-form" action="@Url.Action("SearchByName", "School", new{ sortOrder = "Name"})">
                <input type="text" value="" name="schoolName" id="schoolName" placeholder="Nhập từ khóa để tìm kiếm" style="width: 250px;"/>            
                <input type="submit" id="searchSubmit" value="Tìm kiếm" />
            </form>
        </div>
    </div>
    <!--right panel start -->
    <div id="right">
        <script type="text/javascript">
            $(document).ready(function () {
                var cboCity = $(document).find('select[name="CityID"]');
                var divListService = $(document).find('div[name="ListService"]');
                var cboType = $(document).find('select[name="SchoolTypeID"]');
                cboCity.ready(function (e) {
                    var cid = cboCity.val();
                    // Load district Combo by cityID
                    var url2 = '@Url.Action("GetCityOptionsByGet", "Function")';
                    $.getJSON(url2, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '<option value="0">-- Tất cả thành phố --</option>';
                        cboCity.html(options);
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var k = 0; k < rows.length; k++) {
                                options += '<option value="' + rows[k].Value + '">' +
                                    rows[k].DisplayText + '</option>';
                            }
                        }
                        cboCity.html(options);
                    });
                });

                cboType.ready(function (e) {
                    var cid = cboCity.val();
                    // Load district Combo by cityID
                    var url2 = '@Url.Action("GetSchoolTypeOptionsByGet", "Function")';
                    $.getJSON(url2, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '<option value="0">-- Tất cả loại trường --</option>';
                        cboType.html(options);
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var k = 0; k < rows.length; k++) {
                                options += '<option value="' + rows[k].Value + '">' +
                                    rows[k].DisplayText + '</option>';
                            }
                        }
                        cboType.html(options);
                    });
                });

                divListService.ready(function (e) {
                    var cid = cboCity.val();
                    // Load district Combo by cityID
                    var url2 = '@Url.Action("GetServiceCheckListByGetForIndex", "Function")';
                    $.getJSON(url2, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '';
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var k = 0; k < rows.length; k++) {
                                options += '<div><input type="checkbox" id="ServiceID" name="ServiceID" value="' + rows[k].Value + '">    ' +
                                    rows[k].DisplayText + "</div>";
                            }
                        }
                        divListService.html(options);
                    });
                });
                var cboLine = $(document).find('select[name="DistrictID"]');

                // City ComboBox Change
                cboCity.change(function (e) {
                    var cid = $(this).val();
                    if (cid == 0) {
                        //cboLine.hide();
                        var options = '<option value="0">-- Tất cả quận huyện --</option>';
                        cboLine.html(options);
                        return;
                    }
                    // Refresh District Combo
                    var url = '@Url.Action("GetDistrictOptions", "Function")' + '?cityId=' + cid;
                    $.getJSON(url, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '<option value="0">-- Tất cả quận huyện --</option>';

                        cboLine.html(options);
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var i = 0; i < rows.length; i++) {
                                options += '<option value="' + rows[i].Value + '">' +
                                    rows[i].DisplayText + '</option>';
                            }
                        }
                        cboLine.html(options);
                        cboLine.show();
                        cboLine.change();
                    });

                });
            });
        </script>
        <div id="search_01" style="position: relative; ">
            <form class="search-condition" action="@Url.Action("SearchConditionResult","School")" method="GET" style="padding: 10px;">
                <p>Lựa chọn những tiêu chí phù hợp dưới đây</p>
                    <select id="CityID" name="CityID">
                    </select>
                <select id="DistrictID" name="DistrictID">
                    <option value="0">-- Tất cả Quận Huyện --</option>
                </select>
                    <select id="SchoolTypeID" name="SchoolTypeID">
                    </select>
                    <select id="Fee" name="Fee">
                        <option value="1">-- Tất Cả Mức Học Phí (VNĐ) --</option>
                        <option value="2">Dưới 1.000.000</option>
                        <option value="3">1.000.000-2.000.000</option>
                        <option value="4">2.000.000-3.000.000</option>
                        <option value="5">3.000.000-4.000.000</option>
                        <option value="6">4.000.000-5.000.000</option>
                        <option value="7">Trên 5.000.000</option>
                    </select>
                
                    <div id="ListService" name="ListService">
                    
                    </div>
                    <input type="submit" value="Tìm Kiếm" id="search1" style="bottom: 140px;float: right;position: relative;right: 35px;"/>
            </form>
        </div>
        <div id="search_02" style="position: relative; display: none">
             <div>
                <input type="text" value="" id="txtAddress" data-url="@Url.Action("SearchByMap", "School")" placeholder="Nhập địa chỉ tại đây hoặc lựa chọn trên bản đồ" style="width: 450px;"/>
                <input type="submit" id="btnSearch" value="Tìm kiếm" />
            </div>
            <div id="map_canvas"></div>
           
        </div>
        <div id="search_03" style="position: relative;display: none">
            <form id="search-suggestion" method="get" action="@Url.Action("SchoolSugesstion", "Suggestion")">
                <p style="padding-bottom: 5px; font-weight: bold; clear:both">Mức học phí mong muốn<span style="font-style: inherit; color: red; font-weight: normal">(đơn vị - triệu đồng)</span> </p>
                <input id="userEducation" type="text" value="" name="userEducation">
                <span class="error" style="display: none"></span>
                <br class="clear"/>
                <p style="padding-bottom: 5px; font-weight: bold; clear:both">Chất lượng trường học mong muốn</p>
                <label class="sslabel">
                        <input class="userQuality" type="radio" checked="checked" id="userQuality" name="userQuality" value="1" />Bình thường
                    </label>
                    <br class="clear"/>
                    <label class="sslabel">
                        <input class="userQuality" type="radio" name="userQuality" value="2"><label>Cao</label>
                    </label>
                    <br class="clear"/>
                    <label class="sslabel">
                        <input class="userQuality" type="radio" name="userQuality" value="3"><label>Rất Cao</label>
                    </label>
                <br class="clearfix">
                <input type="submit" value="Tìm kiếm" class="modibutton" id="suggest-search" />
            </form>
        </div>
    </div>
</div>
    <br class="spacer" />
    <!--right panel end -->

<br class="spacer" />
<style type="text/css">
    .articlebox {
        width: 31%;
        float: left;
        box-shadow: none;
        margin-right: 15px;
        margin-left: 6px;
        min-height: 400px;
        position:relative;
    }
    .article-box-title 
    {
        padding-left: 5px;
        text-transform: uppercase;
        color: #774F38;
        font-weight: bold;
        min-height: 32px;
    }
    .article-box-title a:hover {
        color: #E08E79;
    }
    
    .article-box-pic 
    {
        min-height: 100px;
    }
    .pic 
    {
        width: 100%;
        opacity: 0.8;
        margin-bottom: 15px;
    }
    .pic:hover {
        opacity: 1;
    }
    .article-box-content {
        padding: 10px;
        padding-top: 0px;
        height: 100px;
        font-weight: normal;
    }
    .article-box-content strong,b{
        font-weight: normal;
    }
    .read-more {
        text-align: right;
        height:5%; 
        bottom:15px;
    }
    .read-more a {
    }
</style>
<div id="bodyBottom">
    @{
        var fc = new FunctionController();
        var category = (from c in fc.db.Categories
                        select c).OrderBy( c => c.CategoryID);

        string cateName = category.First().CategoryName;
        int cateID = category.First().CategoryID;
        List<Article> art = (from a in fc.db.Articles
                             where a.CategoryID == cateID
                             select a).OrderByDescending(a => a.CreatedTime).Take(3).ToList<Article>(); 
    }
    @{
        for (int i = 0; i <art.Count ; i++)
        {

            <div class="boxMod articlebox" style="margin-left: 6px">
                <div style="text-align: center">
                    <a href="@Url.Action("Details", "Article", new { id = @art[i].ArticleID })" class="article-box-pic">
                        @{
                            string iurl = fc.FirstImage(art[i].ArticleContent);
                            if (iurl == null || iurl == "")
                            {
                                iurl = Url.Content("~/AvartarUser/default_artice.jpg");
                            }
                        }
                        <img src="@iurl"  class="pic" />
                    </a>
                </div>
                <br class="spacer"/>
                <div class="article-box-title">
                    <a href="@Url.Action("Details", "Article", new { id = @art[i].ArticleID })" title="@art[i].Title">
                        @art[i].Title
                    </a>
                </div>
                <br/>
                <div class="article-box-content">

                 
                    @{
                        var content = fc.StripHTML(art[i].ArticleContent);
                        if(content.Length > 200)
                        {
                            var tmp = content;
                            content = tmp.Substring(0, 200);
                            var idx = content.LastIndexOf(' ');
                            if(idx > -1)
                            {
                                content = content.Remove(idx);
                            }
                        }
                    }
                    @Html.Raw(content) ...
                </div>
                <div class="read-more">
                    <a href="@Url.Action("Details", "Article", new { id = @art[i].ArticleID })">
                        Đọc thêm ...
                    </a>
                </div>
                <br class="spacer"/>
                                               
            </div>

        }
        
    }
    <br class="spacer"/>
</div>
<script type="text/javascript">

    function initialize() {

        var map;
        var geocoder = new google.maps.Geocoder();

        var myOptions = {
            zoom: 15,
            center: new google.maps.LatLng(21.028711, 105.782236),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker;

        function placeMarker(location) {
            if (marker) {
                marker.setPosition(location);
            } else {
                marker = new google.maps.Marker({
                    position: location,
                    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                     draggable: true,
                    map: map
                });
            }
            var slocaton;
            geocoder.geocode({ 'latLng': location }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    slocaton = results[1].formatted_address;
                    $('#txtAddress').val(slocaton);
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }

        google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(event.latLng);
            
        });
        
        

        $("#btnSearch").click(function () {
            convertAddressToLatLng($("#txtAddress").val());
        });
    };

    function convertAddressToLatLng(address) {

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //Empty div before re-populating
                //$("#divStores").html('');
                //searchStores(results[0].geometry.location);
                var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                
                //hard coded the radius to 2 km, if you get the value from a field if required
                var $parameters = 'lat=' + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng() + '&radius=2';
                $.ajax({
                    url: $("#txtAddress").attr("data-url"),
                    type: 'GET',
                    data: $parameters,
                    success: function () {
                        location.href = ('@Url.Action("SearchByMap","School")' + '?lat=' + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng() + '&radius=2');
                    }
                });
            } else {
                alert("Vui lòng nhập địa chỉ hoặc kiểm tra lại địa chỉ đã nhập");
            }
        });
    }
</script>